<template>
  <div class="container home-box">
    <div class="left-box">
      <BlogList v-for="(item, index) in blogList" :key="index" :blogDetail="item"></BlogList>
      <!-- 分页器 -->
       <!-- 分页器 -->
      <div class="block">
        <el-pagination
          layout="prev, pager, next"
          :current-page="pageInfo.pageNum"
          @current-change="handleCurrentChange"
          :page-size=pageInfo.pageSize
          :hide-on-single-page="true"
          :total="pageInfo.total">
        </el-pagination>
      </div>
    </div>
    <div class="right-box">
      <RaceMain/>
      <Promotion style="margin-top: 20px;"/>
    </div>
  </div>
</template>

<script>
import BlogList from '../../components/bloglist.vue'
import {GetAllBlogByPage,GetAllBlog} from '../../request/api'
import { mapState } from 'vuex'
import RaceMain from '@/components/race/race_main.vue'
import Promotion from "@/components/title/promotion.vue"
export default {
  data(){
    return{
      params:{
        pageNum:null,
      },
      blogList:[],
      pageInfo:{},
      loginAvatar:''
    }
  },
  components:{
    BlogList,RaceMain,Promotion
  },
  methods:{
    async handleCurrentChange(pageNum){
      // 当前页数据，发送请求得到数据
      this.params.pageNum = pageNum
      let res = await GetAllBlog(this.params)
      this.blogList = res.data.data.list
      this.pageInfo = res.data.data
    }
   
  },
  async created(){
    this.params.pageNum = 1
    //获取博客列表
    let res =await GetAllBlog(this.params)
    this.blogList = res.data.data.list
    this.pageInfo = res.data.data
  }
}
</script>

<style scoped>
.home-box{
  display: flex;
  flex-direction: row;
}
.left-box{
  flex: 7;
}
.block{
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.right-box{
  flex: 3;
}
</style>
